Component({

  externalClasses: ['tabs-item-class','tabs-item-selected-class','icon-item-class'],

  properties:{
    data: {
      type: null,
    },

    keyName: {
      type: String,
    },

    iconSrc: {
     type: String 
    }
  },

  data:{
    scrollLeft: 0,
    tabsItem: 0
  },

  ready(){
    let _this = this;
    _this.$getNode('#tabs-box', res => {
     _this.setData({
       scrollWidth: res[0].width || 0
     });
    });

    _this.$getNode('#tabs-item', res => {
      _this.setData({
        tabsItemWidth: res[0].width || 0
      });
    });
  },

  methods:{
    
    /*tab项*/ 
    _tabsItem(e){
      let _this = this, td = _this.data, 
          base_num = parseInt((td.scrollWidth / 2) / td.tabsItemWidth),
          index = e.currentTarget.dataset.index + 1;

      if (index >= base_num) {
        _this.setData({
          scrollLeft: td.tabsItemWidth * (index - base_num)
        });
      }

      _this.setData({
        tabsItem: index - 1
      });
    },
    
    /*获取元素*/ 
    $getNode(name,callback) {
      const query = wx.createSelectorQuery().in(this);
      query.select(name).boundingClientRect();

      query.exec(queryRes => {
        return callback(queryRes)
      });
    }
  },
});
